import { useState } from 'react'
import ListOne from './ListOne'

// react-router-dom 接受参数useLocation
import { useLocation } from 'react-router-dom'
import { useEffect } from 'react'
function List () {

  let [listdata, setListdata] = useState([
    { id: 1, name: "地下城", price: 103, fac: "腾讯" },
    { id: 2, name: "绝地求生", price: 99, fac: "steam" },
    { id: 3, name: "王者荣耀", price: 23, fac: "天美工作室" },
    { id: 4, name: "和平精英", price: 12, fac: "光子工作室" }
  ])
  let delItem = (id) => {
    console.log(id)
    // 删除了数据
    listdata.map((item, index) => {
      if (id == item.id) {
        listdata.splice(index, 1)
      }
    })
    console.log(listdata)
    //改变后的数组数据  用...扩展运算符 赋值回去
    setListdata([...listdata])
  }
  // 页面挂载完成 获取参数
  // useEffect 代表组件挂载完成，组件更新完成
  let params = useLocation();
  useEffect(() => {
    console.log(params)
    console.log(params.state) // state传参接受
    console.log(params.search)//search传参接受
  })
  return (
    <div className="List">
      <h1>商品推荐</h1>
      {listdata.map((item, index) => {
        return <ListOne todel={delItem} key={index} listItem={item} />
      })}
    </div>
  )
}
export default List